<template>
  <div>
    <!-- 用户详情 -->
    <div style="width: 100%; ">
      <div style=" border: 1px solid #ccc; width: 98%; margin: 0 auto;">
        <el-divider></el-divider>
        <div class="back">
          <div style="margin: 18px 20px; font-weight: 700;">基本信息</div>
          <div>
            <el-button icon="el-icon-arrow-left" type="primary" @click="go"
              >返回</el-button
            >
          </div>
        </div>
        <el-divider></el-divider>
        <div class="fish-box" v-if="fishInfo">
          <el-form ref="fishInfo" :model="fishInfo" label-width="105px">
            <el-form-item
              label="用户头像  :"
              style="display: flex; align-items: center; "
            >
              <div
                style="background-color: #ccc; "
                v-if="!fishInfo.sysUser.avatarUrl"
              >
                <img
                  src="../../../assets/images/username.png"
                  style="width: 100px; height: 100px;  vertical-align: middle;"
                  alt=""
                />
              </div>
              <div
                style="background-color: #ccc;"
                v-if="fishInfo.sysUser.avatarUrl"
              >
                <img
                  :src="fishInfo.sysUser.avatarUrl"
                  style="width: 100px; height: 100px;  vertical-align: middle;"
                  alt=""
                />
              </div>
            </el-form-item>
            <el-form-item label="用户手机号  :">
              <el-input
                v-model="fishInfo.sysUser.phoneNumber"
                disabled
                style="width: 322px; text-align: center;"
              ></el-input>
            </el-form-item>
            <el-form-item label="用户ID  :">
              <el-input
                v-model="fishInfo.sysUser.id"
                disabled
                style="width: 322px;"
              ></el-input>
            </el-form-item>
            <el-form-item label="姓名  :">
              <el-input
                v-model="fishInfo.sysUser.realName"
                disabled
                style="width: 322px;"
              ></el-input>
            </el-form-item>
            <el-form-item label="昵称  :">
              <el-input
                v-model="fishInfo.sysUser.nickName"
                disabled
                style="width: 322px;"
              ></el-input>
            </el-form-item>

            <el-form-item label="注册时间  :">
              <el-input
                v-model="fishInfo.sysUser.createTime"
                disabled
                style="width: 322px;"
              ></el-input>
            </el-form-item>
            <el-form-item label="身份证号  :">
              <el-input
                v-model="fishInfo.sysUser.idCard"
                disabled
                style="width: 322px;"
              ></el-input>
            </el-form-item>
            <el-form-item label="生日  :">
              <el-input
                v-model="fishInfo.sysUser.birthDay"
                disabled
                style="width: 322px;"
              ></el-input>
            </el-form-item>
            <el-form-item label="最后上线时间时间  :">
              <el-input
                v-model="fishInfo.userExtra.lastLoginTime"
                disabled
                style="width: 322px;"
              ></el-input>
            </el-form-item>
            <el-form-item label="邮箱  :">
              <el-input
                v-model="fishInfo.userExtra.email"
                disabled
                style="width: 322px;"
              ></el-input>
            </el-form-item>
            <el-form-item label="代理等级  :">
              <div
                v-if="fishInfo.fishPartyAgentLevel == 1"
                style="text-align: center;"
              >
                市级代理
              </div>
              <div
                v-if="fishInfo.fishPartyAgentLevel == 2"
                style="text-align: center;"
              >
                省级代理
              </div>
            </el-form-item>
            <el-form-item label="代理上级  :">
              <div
                v-if="fishInfo.fishPartyAgentLevel == 0"
                style="text-align: center;"
              >
                暂无代理
              </div>
              <div
                v-if="fishInfo.fishPartyAgentLevel == 1"
                style="text-align: center;"
              >
                {{ fishInfo.fishPartyAgentSuperiorId }}
              </div>
              <div
                v-if="fishInfo.fishPartyAgentLevel == 2"
                style="text-align: center;"
              >
                深圳市聪明鱼智能科技股份有限公司
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <!-- 统计信息 -->
      <div>
        <div style="border: 1px solid #ccc; width: 98%; margin: 0 auto;">
          <!-- 表格 -->
          <div class="fish-box">
            <div>
              <img
                style="height: 25px; width: 20px;"
                src="../../../assets/images/fishInfo.png"
                alt=""
              />
            </div>
            <div class="fish-info">
              统计信息
            </div>
          </div>
          <div class="fish-box1">
            <div>
              <table
                class="portait-table1"
                border="2"
                cellspacing="0"
                cellpadding="0"
              >
                <tr>
                  <template>
                    <tr style="width: 100%;">
                      <th style="width: 560px; height: 40px;">消费金额</th>
                      <th style="width: 560px; height: 40px;">消费笔数</th>
                      <th style="width: 560px; height: 40px;">智能鱼方数量</th>
                      <th style="width: 560px; height: 40px;">鱼米余额</th>
                      <th style="width: 560px; height: 40px;">客户数</th>
                      <th style="width: 560px; height: 40px;">登录次数</th>
                    </tr>
                    <tr>
                      <td>{{ fishInfo.consumeAmount }}</td>
                      <td>{{ fishInfo.consumeCount }}</td>
                      <td>{{ fishInfo.fishPartyCount }}</td>
                      <td>{{ fishInfo.sysUser.fishIntegral }}</td>
                      <td>{{ fishInfo.customerCount }}</td>
                      <td>{{ fishInfo.loginCount }}</td>
                    </tr>
                  </template>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="租赁订单" name="first">
          <div style="border: 1px solid #ccc; width: 98%; margin: 0 auto;">
            <el-table
              border
              :data="listData"
              style="width: 100%"
              align="center"
            >
              <el-table-column
                prop="orderNo"
                label="订单编号"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="createTime"
                label="提交时间"
                align="center"
              ></el-table-column>
              <el-table-column label="租赁属性" align="center">
                <template slot-scope="scope">
                  <div v-if="scope.row.attribute == 1">
                    租赁3年获得40000元人民币
                  </div>
                  <div v-if="scope.row.attribute == 2">
                    租赁3年鱼获自行处理
                  </div>
                  <div v-if="scope.row.attribute == 3">
                    租赁3年获得2400斤鱼
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="支付方式" align="center">
                <template slot-scope="scope">
                  <div v-if="scope.row.paymentMode == 'wechatpay'">
                    微信支付
                  </div>
                  <div v-if="scope.row.paymentMode == 'alipay'">
                    支付宝
                  </div>
                  <div v-if="scope.row.paymentMode == 'bytedancepay'">
                    字节跳动
                  </div>
                  <div v-if="scope.row.paymentMode == 'offlinePay'">
                    线下支付
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="totalPrice"
                label="订单金额"
                align="center"
              ></el-table-column>
              <el-table-column label="订单来源" align="center">
                <template slot-scope="scope">
                  <div v-if="scope.row.sourceType == 'wxmini'">
                    微信小程序
                  </div>
                  <div v-if="scope.row.sourceType == 'web'">
                    H5
                  </div>
                  <div v-if="scope.row.sourceType == 'android'">
                    安卓
                  </div>
                  <div v-if="scope.row.sourceType == 'ios'">
                    苹果
                  </div>
                  <div v-if="scope.row.sourceType == 'wxweb'">
                    微信浏览器
                  </div>
                  <div v-if="scope.row.sourceType == 'pc'">
                    后台录单
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="订单状态" align="center">
                <template slot-scope="scope">
                  <div v-if="scope.row.orderStatus == 1">
                    待支付
                  </div>
                  <div v-if="scope.row.orderStatus == 2">
                    已完成
                  </div>
                  <div v-if="scope.row.orderStatus == 3">
                    已失效
                  </div>
                  <div v-if="scope.row.orderStatus == 4">
                    已关闭
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="发票状态" align="center">
                <template slot-scope="scope">
                  <div v-if="scope.row.invoiceStatus == 1">
                    未申请
                  </div>
                  <div v-if="scope.row.invoiceStatus == 2">
                    开票中
                  </div>
                  <div v-if="scope.row.invoiceStatus == 3">
                    已完成
                  </div>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    @click="handleClick(scope.row.id)"
                    type="primary"
                    size="small"
                    >查看</el-button
                  >
                  <el-button
                    v-permission="['fishPartyOrder:info:close']"
                    @click="closeClick(scope.row.id)"
                    type="primary"
                    size="small"
                    >关闭订单</el-button
                  >
                  <!-- <el-button v-permission="['fishPartyOrder:info:close']"  @click="handleClick(scope.row.id)" type="primary" size="small">删除</el-button>  -->
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <div class="block" style="margin-top:15px;">
              <el-pagination
                align="center"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="智能渔方" name="second">
          <div style="border: 1px solid #ccc; width: 98%; margin: 0 auto;">
            <!-- 表格 -->
            <el-table
              border
              :data="listInfo"
              style="width: 100%"
              align="center"
            >
              <el-table-column
                prop="fishPartyNo"
                label="智能渔方编号"
                align="center"
              ></el-table-column>

              <el-table-column
                prop="effectiveDate"
                label="租赁起租日期"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="expirationDate"
                label="租赁截至日期"
                align="center"
              ></el-table-column>

              <el-table-column label="租赁属性" align="center">
                <template slot-scope="scope">
                  <div v-if="scope.row.attribute == 1">
                    租赁3年获得40000元人民币
                  </div>
                  <div v-if="scope.row.attribute == 2">
                    租赁3年鱼获自行处理
                  </div>
                  <div v-if="scope.row.attribute == 3">
                    租赁3年获得2400斤鱼
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="reservoirName"
                label="所属水库"
                align="center"
              ></el-table-column>
              <el-table-column fixed="right" label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    @click="fishClick(scope.row)"
                    type="primary"
                    size="small"
                    >查看</el-button
                  >
                  <el-button
                    v-permission="['sysUser:info:edit']"
                    @click="editClick(scope.row)"
                    type="primary"
                    size="small"
                    >编辑</el-button
                  >
                  <!-- <el-button  v-permission="['fishParty:list:delete']" @click="editClick(scope.row)" type="text" size="small">删除</el-button>  -->
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <div class="block" style="margin-top:15px;">
              <el-pagination
                align="center"
                @size-change="handleSizeChanges"
                @current-change="handleCurrentChanges"
                :current-page="currentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSizes"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="totals"
              >
              </el-pagination>
            </div></div
        ></el-tab-pane>
        <el-tab-pane label="我的客户" name="third">
          <div style="border: 1px solid #ccc; width: 98%; margin: 0 auto;">
            <!-- 表格 -->
            <el-table
              border
              :data="agentInfo"
              style="width: 100%"
              align="center"
            >
              <el-table-column
                prop="customUserId"
                label="客户ID"
                align="center"
              ></el-table-column>

              <el-table-column
                prop="customNickName"
                label="客户昵称"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="createTime"
                label="成为客户时间"
                align="center"
              ></el-table-column>

              <el-table-column label="成交状态" align="center">
                <template slot-scope="scope">
                  <div v-if="scope.row.transactionFlag == 1">
                    待成交
                  </div>
                  <div v-if="scope.row.transactionFlag == 2">
                    已成交
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="lockExpiryDate"
                label="锁定期限"
                align="center"
              ></el-table-column>
              <el-table-column fixed="right" label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    @click="examineClick(scope.row)"
                    type="primary"
                    size="small"
                    >查看</el-button
                  >
                  <el-button
                    v-if="scope.rowtransactionFlag == 1"
                    @click="statusClick(scope.row)"
                    type="danger"
                    size="small"
                    >解除锁定</el-button
                  >
                  <!-- <el-button  v-permission="['fishParty:list:delete']" @click="editClick(scope.row)" type="text" size="small">删除</el-button>  -->
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <div class="block" style="margin-top:15px;">
              <el-pagination
                align="center"
                @size-change="handleSizeChanges"
                @current-change="handleCurrentChanges"
                :current-page="currentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSizes"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="totals"
              >
              </el-pagination>
            </div></div
        ></el-tab-pane>
        <el-tab-pane label="鱼米记录" name="fourth">
          <div style="border: 1px solid #ccc; width: 98%; margin: 0 auto;">
            <!-- 表格 -->
            <el-table
              border
              :data="Fishrice"
              style="width: 100%"
              align="center"
            >
              <el-table-column
                prop="createTime"
                label="时间"
                align="center"
              ></el-table-column>

              <el-table-column label="来源" align="center">
                <template slot-scope="scope">
                  <div v-if="scope.row.source == 1">
                    管理员修改
                  </div>
                  <div v-if="scope.row.source == 2">
                    充值
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="currentIntegral"
                label="金额"
                align="center"
              ></el-table-column>

              <el-table-column
                prop="fishIntegral"
                label="余额"
                align="center"
              ></el-table-column>

              <el-table-column
                prop="remark"
                label="备注"
                align="center"
              ></el-table-column>
            </el-table>
            <!-- 分页器 -->
            <div class="block" style="margin-top:15px;">
              <el-pagination
                align="center"
                @size-change="handleSizeChanges"
                @current-change="handleCurrentChanges"
                :current-page="currentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSizes"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="totals"
              >
              </el-pagination>
            </div></div
        ></el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import {
  editSysUserDetail,
  editFishPartyOrder,
  closeOrder,
  editFishParty,
  agentCustomer,
  relieveCustomerLock,
  getWalletRecord
} from "@/api/user";
import { Toast } from "vant";
export default {
  data() {
    return {
      fishInfo: {}, // 渔方信息
      activeName: "first",

      ids: 0,
      listData: [],
      loading: false,
      assetsUidList: [], // 下标值
      currentPage: 1, //当前页数
      pageSize: 10, //每页条数
      total: 0, //总条目数
      currentPages: 1, //当前页数
      pageSizes: 10, //每页条数
      totals: 0, //总条目数
      listInfo: [],
      invoiceStatus: 0, //发票状态：0.全部 1.未申请 2.开票中 3.已完成
      orderNo: "", //订单编号
      orderStatus: 0, //订单状态 0.全部 1.待支付 2.已完成 3.已失效 4.已关闭
      orderBeginDate: "", //订单申请时间
      orderEndDate: "", //订单结束时间
      userId: "", //用户ID
      phoneNumber: "", //用户手机号
      agentInfo: [], // 我的客户数据信息
      Fishrice: [] //鱼米分页数据
    };
  },
  created() {
    this.userId = this.$route.query.e;
    this.editSysUserDetail();
    this.editFishPartyOrder(this.pageSize, this.currentPage);
    this.editFishParty(this.pageSizes, this.currentPages);
    this.agentCustomer(this.pageSizes, this.currentPages);
    this.getWalletRecord(this.pageSizes, this.currentPages);
  },
  methods: {
    // 返回
    go() {
      this.$router.go(-1);
    },
    // 鱼米记录分页
    async getWalletRecord() {
      let data = {
        limit: this.pageSizes,
        page: this.currentPages,
        userId: this.userId
      };
      let result = await getWalletRecord(data);
      if (result.code == 0) {
        this.Fishrice = result.data.records;
      }
    },
    // 解除我的客户锁定
    async statusClick(e) {
      let data = {
        agentUserId: e.agentUserId,
        customerUserId: e.customUserId
      };
      let result = await relieveCustomerLock(data);
      if (result.code == 0) {
        Toast.success("解除客户锁定成功");
        this.agentCustomer(this.pageSizes, this.currentPages);
      }
    },
    // 查看我的客户详情
    examineClick(v) {
      let e = v.userId;
      this.$router.push({ path: "examine", query: { e } });
    }, // 删除用户
    // 我的客户分页
    async agentCustomer() {
      let data = {
        limit: this.pageSizes,
        page: this.currentPages,
        userId: this.userId,
        customerType: 0,
        agentId: 0
      };
      let result = await agentCustomer(data);
      if (result.code == 0) {
        this.agentInfo = result.data.records;
      }
    },
    // 编辑
    editClick(e) {
      let fishPartyId = e.fishPartyId;
      let orderId = e.orderId;
      this.$router.push({ path: "/editFish", query: { fishPartyId, orderId } });
    },

    // 关闭订单
    async closeClick(e) {
      let data = {
        orderId: e
      };
      let result = await closeOrder(data);
      if (result.code == 0) {
        Toast.success("订单已关闭");
        this.editFishPartyOrder(this.pageSize, this.currentPage);
      } else {
        Toast.fail("订单关闭失败,请稍后再试");
      }
    },
    // 渔方分页
    async editFishParty(limit, page) {
      let data = {
        limit: this.pageSizes,
        page: this.currentPages,
        attribute: this.attribute,
        fishPartyNo: this.fishPartyNo,
        homeLiveFlag: this.homeLiveFlag,
        phoneNumber: this.phoneNumber,
        userId: this.userId,
        orderId: this.orderId,
        reservoirId: this.reservoirId
      };

      let result = await editFishParty(data);
      if (result.code == 0) {
        this.listInfo = result.data.records;
        this.pageSizes = result.data.limit;
        this.totals = result.data.total;
      }
    },
    // 订单分页
    async editFishPartyOrder(limit, page) {
      let data = {
        limit: this.pageSize,
        page: this.currentPage,
        invoiceStatus: this.invoiceStatus,
        orderNo: this.orderNo,
        orderStatus: this.orderStatus,
        orderBeginDate: this.orderBeginDate,
        orderEndDate: this.orderEndDate,
        phoneNumber: this.phoneNumber,
        userId: this.userId
      };
      let result = await editFishPartyOrder(data);
      if (result.code == 0) {
        this.listData = result.data.records;
        this.pageSize = result.data.limit;
        this.total = result.data.total;
      }
      this.listData.forEach(element => {
        if (element.agentLevel == 2) {
          element.agentLevel = "省级代理";
        } else {
          element.agentLevel = "市级代理";
        }
      });
    },
    // 查看
    handleClick(e) {
      this.$router.push({ path: "/orderEdit", query: { e } });
    },
    // 查看渔方详情
    fishClick(e) {
      console.log(111111111111);
      // 渔方ID
      let fishPartyId = e.fishPartyId;
      let orderId = e.orderId;

      this.$router.push({
        path: "/fishEdit",
        query: { fishPartyId, orderId }
      });
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.editFishPartyOrder(this.pageSize, this.currentPage);
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.editFishPartyOrder(this.pageSize, this.currentPage);
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChanges(val) {
      this.currentPages = 1;
      this.pageSizes = val;
      this.editFishParty(this.pageSizes, this.currentPages);
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChanges(val) {
      this.currentPage = val;
      this.editFishParty(this.pageSizes, this.currentPages);
    },
    async editSysUserDetail() {
      let data = {
        userId: this.userId
      };
      let result = await editSysUserDetail(data);
      if (result.code == 0) {
        this.fishInfo = result.data;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__header {
  padding: 0;
  position: relative;
  margin: 0 0 15px 22px;
}
::v-deep .el-input.is-disabled .el-input__inner {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #070707;
  cursor: not-allowed;
  text-align: center;
}
.back {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 20px;
}
.btn {
  display: flex;
  margin: 20px 20px;
}
.fish-sprout {
  border: 1px solid #000;
  width: 500px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fish {
  border: 1px solid #ccc;
  width: 98%;
  height: 350px;
  margin: 30px 24px;
}

.fish-info {
  margin-left: 5px;
  height: 25px;
}
.sprout-box {
  display: flex;
  align-items: center;
  margin: 50px 20px;
}
.fish-boxs {
  display: flex;
  align-items: center;
  margin: 36px 15px;
}

.fish-box {
  display: flex;
  margin: 30px 24px;
  width: 98%;
}
.fish-box1 {
  display: flex;
  margin: 30px 24px;
  width: 98%;
}
th {
  background: #d7d7d7;
  color: #454545;
}
.portait-table1 {
  border-collapse: collapse;
  border: none;
  width: 100%;

  td {
    border: 1px solid #d7d7d7;
    height: 40px;
    padding-left: 10px;
    color: #333;
    width: 100px;
    text-align: center;

    &:nth-child(odd) {
      //   background: #d7d7d7;
      color: #454545;
    }
  }
}
.portait-table {
  border-collapse: collapse;
  border: none;
  width: 100%;

  td {
    border: 1px solid #f3f3f3;
    height: 40px;
    padding-left: 10px;
    color: #333;
    // width: 100px;
    text-align: center;

    &:nth-child(odd) {
      background: #d7d7d7;
      color: #454545;
    }
  }

  .edit {
    border: 1px solid rgb(121, 27, 27);
    width: 180px;
  }

  .edit-img {
    width: 180px;
    height: 50px;
  }
}
</style>
